<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TM Lib</title>
        
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            
            TM.loadScript("graphics", "graphics");
            //TM.loadScript("data", "sincos-table");
            
            /**
             * main
             */
            TM.main(function()
            {
                var g = TM.Graphics.Graphics(TM.$id("c"));
                                
                var draw = function() {
                    // 描画
                    var radius      = TM.$id("radius").value;
                    var sides       = TM.$id("sides").value;
                    var sideIndent  = TM.$id("sideIndent").value;
                    var offsetAngle = TM.$id("offsetAngle").value;
                    g.clear();
                    
                    g.save();
                    g.shadowBlur = 10;
                    g.shadowColor ="black";
                    g.fillStyle = "black";
                    g.fillStar(256, 256, radius, sides, sideIndent/100.0, offsetAngle);
                    g.restore();
                    
                    g.save();
                    g.fillStyle = "yellow";
                    g.fillStar(256, 256, radius*0.9, sides, sideIndent/100.0, offsetAngle);
                    g.restore();
                    
                    // 値を表示する
                    TM.$id("radius-value").innerHTML        = radius + "px";
                    TM.$id("sides-value").innerHTML         = sides;
                    TM.$id("sideIndent-value").innerHTML    = sideIndent + "%";
                    TM.$id("offsetAngle-value").innerHTML   = offsetAngle + "°";
                };
                draw();
                
                var rangeList = TM.$queryAll("input[type=range]");
                for (var i=0,len=rangeList.length; i<len; ++i) {
                    rangeList[i].addEventListener("change", draw);
                }
                
                TM.$id("reset").addEventListener("click", function(){
                    TM.$id("radius").value      = 200;
                    TM.$id("sides").value       = 5;
                    TM.$id("sideIndent").value  = 38;
                    TM.$id("offsetAngle").value = 270;
                    draw();
                });
                TM.$id("save").addEventListener("click", function(){
                    g.saveAsImage();
                });
            });
            
        </script>

    </head>
    
    <body>
        <canvas id="c" title="star" width=512 height=512></canvas>
        <table>
            <tr>
                <th><label for="radius">Radius :</label></th>
                <td><input type="range" id="radius" value="200" min="5" max="300" /></td>
                <td id="radius-value"></td>
            </tr>
            <tr>
                <th><label for="sides">Sides :</label></th>
                <td><input type="range" id="sides" value="5" min="3" max="60" /></td>
                <td id="sides-value"></td>
            </tr>
            <tr>
                <th><label for="sideIndent">Side Indent :</label></th>
                <td><input type="range" id="sideIndent" value="38" min="-100" max="100" /></td>
                <td id="sideIndent-value"></td>
            </tr>
            <tr>
                <th><label for="offsetAngle">Offset Angle :</label></th>
                <td><input type="range" id="offsetAngle" value="270" min="0" max="360" /></td>
                <td id="offsetAngle-value"></td>
            </tr>
            <tr>
                <td rowspan="2">
                    <button id="reset">Reset</button>
                    <button id="save">Save</button>
                </td>
            </tr>
        </table>
    </body>
</html>